<template>
  <div class="question-base-page">
    <div style="padding: 0 10px;">
      <div class="test-info">
      <div
        v-html="bigQuestionDetail.title"
        :class="{ active: curReadingBlock.bigExplain }"
      ></div>
      <div
        v-html="smallQuestionDetail.content"
        :class="{ active: curReadingBlock.smallExplain }"
        style="padding-top: 14px"
      ></div>
    </div>
    </div>
    <div class="audio-box">
      <div class="horn">
        <!-- autoplay -->
        <audio
          style="opacity: 0; width: 0px; height: 0px"
          controls
          ref="audioRef"
          :src="curAudioSrc"
          @play="onPlayBack"
          @pause="onPauseBack"
          @loadeddata="onLoadedBack"
          @error="onLoadErrorBack"
        />
        <img ref="hornImgRef" :src="stepImgIcon" width="52px" />
        <div class="next-step">
          <div v-show="state.step === 1" class="next-step-tip">
            点击提前结束播放
          </div>
          <div
            v-if="state.step === 3"
            class="next-step-text"
            @click="handleFinishTape()"
          >
            完成录音
          </div>
          <div v-else class="next-step-text" @click="handleNestStep()">
            下一步
          </div>
        </div>
      </div>
      <div class="bottom-tip">
        正在播放原音 剩余
        <div class="count-down">
          <VanCountDown
            ref="vanCountDownRef"
            :time="audioDuration"
            :auto-start="false"
            format="ss"
          />
          s
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  defineProps,
  reactive,
  toRefs,
  defineEmits,
  ref,
  computed,
  nextTick,
  onBeforeMount,
} from "vue";
import { showToast, showFailToast, CountDown as VanCountDown } from "vant";

import iconHorn from "@/assets/images/wrongBook/icon-horn.gif"; // 播放
import iconHourglass from "@/assets/images/wrongBook/icon-hourglass.png"; // 准备
// import iconRead from "@/assets/images/wrongBook/icon-read.png"; //阅读
import iconTape from "@/assets/images/wrongBook/icon-tape.gif"; //录音

const props = defineProps({
  bigQuestionDetail: {
    // 大题信息
    type: Object,
    default: () => ({}),
  },
  smallQuestionDetail: {
    // 小题信息
    type: Object,
    default: () => ({}),
  },
  isBigAudioFlag: {
    // 是否播放大题
    type: Boolean,
    default: true,
  },
});
const audioRef = ref();
const vanCountDownRef = ref();
const hornImgRef = ref();
const emit = defineEmits(['getNextQuestion']);
const state = reactive({
  curReadingBlock: {
    // 当前阅读的题目
    bigExplain: props.isBigAudioFlag,
    smallExplain: false,
  },
  curAudioSrc: "",
  audioDuration: 0, // 可能后端会返回!!!!
  step: 1, // 1-阅读大题 2-准备 3-
  stepSetTimeout: null,
});
onBeforeMount(() => {
  const { curReadingBlock } = state;
  const { bigExplain } = curReadingBlock;
  const { bigQuestionDetail, smallQuestionDetail } = props;
  state.curAudioSrc = bigExplain
    ? bigQuestionDetail.audioSrc
    : smallQuestionDetail.audioSrc;
  nextTick(() => {
    // handlePlay()
  });
});

const stepImgIcon = computed(() => {
  const { step } = state;
  if (step === 1) return iconHorn;
  if (step === 2) return iconHourglass;
  // if (step === 3) return iconRead;
  if (step === 3) return iconTape;
});

const handlePlay = () => {
  if (!audioRef || !audioRef.value) {
    showToast("播放失败,请刷新后重试!");
    return;
  }
  vanCountDownRef && vanCountDownRef.value && vanCountDownRef.value.start();
  audioRef.value.play();
};
const onLoadedBack = () => {
  state.audioDuration = Math.floor(audioRef.value.duration) * 1000;
};
const onLoadErrorBack = () => {
  showToast("音频加载失败!");
};
const handleNestStep = () => {
  if (state.step === 1) {
    // 读大题阶段
    audioRef && audioRef.value && audioRef.value.pause();
    const { curReadingBlock } = state;
    const { bigExplain } = curReadingBlock;
    if (bigExplain) {
      state.curReadingBlock.smallExplain = true;
      state.curReadingBlock.bigExplain = false;
    }
    state.step = 2;
  } else if (state.step === 2) {
    // 准备阶段
    state.step = 3;
    state.stepSetTimeout = setTimeout(() => {
      handleNestStep()
    }, 3000);
  } else if (state.step === 3) {
    clearTimeout(state.stepSetTimeout);
  }
};
const handleFinishTape = () => {
  state.step = 1;
  // 提交录音!!!

  //进入下一题
  emit('getNextQuestion')
};

const { curReadingBlock, audioDuration, curAudioSrc } = toRefs(state);
</script>
<style scoped lang="scss">
.question-base-page {
  padding-bottom: 20px;
  .test-info {
    background: #ffffff;
    border-radius: 15px;
    padding: 10px 10px 15px;
    font-size: 14px;
    color: #b5b5b5;
    font-weight: 500;
    .active {
      color: #333;
    }
  }
  .audio-box {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    .horn {
      padding-bottom: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .next-step {
        position: relative;
        &-tip {
          font-size: 12px;
          background: rgb(0, 0, 0, 0.5);
          color: #fff;
          white-space: nowrap;
          padding: 4px 10px;
          border-radius: 5px;
          position: absolute;
          top: -8px;
          left: 50%;
          transform: translate(-50%, -100%);
          &::after {
            content: "";
            border: 5px solid rgba(0, 0, 0, 0);
            border-top: 5px solid rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 50%;
            top: 100%;
            transform: translate(-50%, 0);
          }
        }
        &-text {
          font-size: 16px;
          color: #0cb76c;
          font-weight: 500;
        }
      }
    }
    .bottom-tip {
      font-size: 12px;
      color: #333333;
      background-color: #ddeee6;
      padding: 6px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      .count-down {
        color: #0cb76c;
        display: flex;
        align-items: center;
        justify-content: center;
        .van-count-down {
          font-size: 12px;
          color: #0cb76c;
        }
      }
    }
  }
}
</style>
